<template>
  <div>
    <nav-top title="医院详情" :goback="true"></nav-top>
    <div class="hospital-details">
      <a href="aa">
        <img class="home-icon" src="/static/icon/home.png" />
      </a>
      <div class="banner">
        <van-swipe class="img" :autoplay="3000" indicator-color="#06A44F">
          <van-swipe-item v-for="(val,key) in imgList" :key="key">
            <img :src="val" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="hospital-info">
        <p class="hospital-name">{{ hospital.name }}</p>
        <p>地址：{{ hospital.address }}</p>
        <p>网址：{{ hospital.homepage }}</p>
        <p>电话：{{ hospital.phone }}</p>
      </div>
      <div class="more-info">
        <p class="info-label">医院介绍</p>
        <p class="info-value">{{ hospital.intro }}</p>
        <p class="info-label">推荐理由</p>
        <p class="info-value">{{ hospital.reason }}</p>
      </div>
    </div>
    <contact-footer v-show="false"></contact-footer>
  </div>
</template>
<script>
import NavTop from "@/components/nav/navBar";
import ContactFooter from "@/components/footer/contactFooter";

export default {
  components: {
    NavTop,
    ContactFooter
  },
  data() {
    return {
      imgList: ["/static/img/hospital/hospital.png", "/static/img/hospital/hospital.png"],
      hospital: {
        name: "医院名称",
        address: "医院地址",
        homepage: "医院网站",
        phone: "医院电话",
        intro:
          "养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍。养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍养和医院医院介绍。",
        reason:
          "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由。"
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.hospital-details {
  margin-top: 45px;
  .home-icon {
    width: 13px;
    height: 14px;
    position: fixed;
    top: 18px;
    right: 11px;
    z-index: 210;
  }
  .banner {
    .img {
      width: 320px;
      height: 241px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .hospital-info {
    margin: 20px 10px 0px 9px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
    p {
      margin: 0;
      font-size: 11px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      margin-top: 9px;
    }
    .hospital-name {
      margin: 0;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 1em;
      padding-bottom: 4px;
    }
  }
  .more-info {
    margin: 25px 10px 0px 9px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e6e6e6;
    .info-label {
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      margin: 23px 0 0 0;
    }
    .info-value {
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 24px;
      margin: 20px 0 0 0;
    }
  }
}
</style>